<%--
  Created by IntelliJ IDEA.
  User: YYW
  Date: 2020/5/29
  Time: 23:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>找回密码</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.form.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="http://www.magicalcoder.com/magicaldrag/assets/drag/ui/magicalcoder/1.1.0/magicalcoder.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.3/json3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/extension/dataTool.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
    <script src="http://www.magicalcoder.com/assets/js/common.js"></script>
    <script src="http://www.magicalcoder.com/magicaldrag/assets/drag/ui/magicalcoder/1.1.0/magicalcoder.js"></script>
</head>
<body class="layui-form" style="background-color:#eee;padding: 20px;">
<div class="container" style="padding-left: 20%; padding-right: 20%;">
    <form method="get" action="./user/setNewPassword" id="formSetNewPassword" onsubmit="return register();">
        <h1 class="h3 mb-3 font-weight-normal">请修改密码</h1>
        <input class="form-control" id="email" name="email" type="email" placeholder="请输入您的邮箱" required/>
        <input class="form-control" id="password" name="password" type="password" placeholder="请输入新密码（6-16位的数字或字母组成）" origin-type="password"  required/>
        <input class="form-control" id="verificationCode" name="verificationCode" type="text" placeholder="请输入验证码"  required/>
        <button id="getVerificationCodeButton" class="btn btn-lg btn-primary btn-block" type="button" onclick="getVerificationCode()">获取验证码</button>
        <button class="btn btn-lg btn-primary btn-block" type="submit">修改</button>
    </form>
</div>
<script type="text/javascript">
    var getVerificationCode = function() {
        var button = document.getElementById("getVerificationCodeButton");
        if ($("#email").val() == "") {
            alert("请输入邮箱");
            $("#email")[0].focus();
        } else {
            $.ajax({
                url:"./user/getVerificationCode",
                type:"GET",
                contentType:"application/json;charset=UTF-8",
                data:{
                    email:$("#email").val()
                },
                success:function (result) {
                    var data = eval(result);
                    if (data){
                        button.style.backgroundColor = "rgba(0, 123, 255, 0.7)";
                        button.onclick = "";
                        var count = 60;
                        var timer = setInterval(function () {
                            count --;
                            if (count <= 0){
                                button.innerHTML = "获取验证码";
                                button.style.backgroundColor = "rgba(0, 123, 255, 1)";
                                button.onclick = getVerificationCode;
                                clearInterval(timer);
                            } else {
                                button.innerHTML = "获取成功(" + count + ")";
                            }
                        }, 1000);
                    } else {
                        alert("获取失败");
                    }
                }
            })
        }
    };

    function register() {
        $("#formSetNewPassword").ajaxSubmit({
            success:function (result) {
                var data = eval(result);
                if (data){
                    location.replace("./login.jsp");
                } else {
                    alert("修改失败");
                }
            }
        });
        return false;
    }




</script>


</body>
</html>
